<template>
  <div class="anchorList">
    <el-aside>
      <a href="#1">第一张</a>
      <a href="#2">第二张</a>
      <a href="#3">第三张</a>
      <a href="#4">第四张</a>
      <a href="#5">第五张</a>
      <a href="#6">第六张</a>
      <a href="#7">第七张</a>
    </el-aside>
    <div class="con" style="margin-left: 300px;height: 100%;overflow-x: hidden; overflow-y: scroll;">
      <div :id="item" v-for="item in 7" :key="item" :style="{ backgroundImage: `url(${list[item]})` }"></div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      list: {
        '1': require('../assets/images/viewAnimate/1.jpg'),
        '2': require('../assets/images/viewAnimate/2.jpg'),
        '3': require('../assets/images/viewAnimate/3.jpg'),
        '4': require('../assets/images/viewAnimate/4.jpg'),
        '5': require('../assets/images/viewAnimate/5.jpg'),
        '6': require('../assets/images/viewAnimate/6.jpg'),
        '7': require('../assets/images/viewAnimate/7.jpg')
      }
    }
  },
  mounted () {
    setTimeout(() => {
      this.scroll()
      const dom = document.querySelector('.con')
      dom.onscroll = this.scroll
    }, 50)
  },
  methods: {
    scroll () {
      const dom = document.querySelector('.con')
      const domList = document.querySelectorAll('.con div')
      const aList = document.querySelectorAll('a')
      const sT = this.$utils.scroll.ScollPostion(dom).top + 10
      domList.forEach((e, index) => {
        const H = e.offsetTop
        if (sT >= H) {
          aList[index].classList.add('isActive')
          this.$utils.common.siblings(aList[index]).forEach(e => {
            e.classList.remove('isActive')
          })
        } else {
          aList[index].classList.remove('isActive')
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .anchorList {
    height: 100%;
    position: relative;
    a {
      text-decoration: none;
      display: block;
      padding: 5px;
      background-color: pink;
      margin-right: 15px;
      color: #fff;
    }
    a:hover {
      background-color: darkred;
    }
    a.isActive {
      background-color: darkred;
    }
    /deep/ .el-aside {
      position: absolute;
      top: 0;
      left: 0;
    }
    .con {
      div {
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        min-height: 500px;
      }
    }
  }

</style>
